<template>
  <view class="common-problem">
    <view class="problem-header">
      <view class="header-left">
        <view class="chatIcon icon-xinwen"></view>
        <text>常见问题</text>
      </view>
    </view>

    <view class="problem-tabs">
      <scroll-view scroll-x class="tab-scroll">
        <view class="tab-list">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            class="tab-item"
            :class="{ active: currentTab === index }"
            @tap="switchTab(index)"
          >
            {{ tab.knowledgeTypeName }}
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="problem-list">
      <view
        v-for="(item, index) in currentProblemList"
        :key="item.id"
        class="problem-item"
        @tap="handleProblemClick(item)"
      >
        <text class="problem-title">{{ item.title }}</text>
        <view><u-icon name="arrow-right"></u-icon></view>
      </view>

      <view class="no-data" v-if="currentProblemList.length === 0">
        <u-empty text="暂无数据" mode="list" icon-size="80rpx"></u-empty>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, reactive } from "vue";
import { getkfKnowledgeBaseTypeList, getkfKnowledgeBasePage } from "../api";

const tabs = ref([]);
const currentTab = ref(0);

const problemList = ref([
]);

// 根据当前选中的tab筛选问题列表
const currentProblemList = computed(() => {
  return problemList.value;
});

// 切换tab
const switchTab = (index: number) => {
  currentTab.value = index;
  params.knowledgeTypeId = tabs.value[index].id;
  getProblemList();
};

// 点击问题项
const handleProblemClick = (item: any) => {
  emit("select", item);
};

const emit = defineEmits(["select"]);

const getTypeList = async () => {
  try {
    const { data, success } = await getkfKnowledgeBaseTypeList({ level: 2 });
    console.log(data, success);
    if (success) {
      tabs.value = data;

      // 选中第一个tab
      if (tabs.value.length > 0) {
        params.knowledgeTypeId = tabs.value[0].id;
        getProblemList();
      }

    } else {
      tabs.value = [];
    }
  } catch (error) {
    console.error(error);
    tabs.value = [];
  }
};

const params = reactive({
  current: 1,
  size: 10,
  knowledgeTypeId: 0,
  // dataType	数据类型 1-知识库 2-问题库
  dataType: 2
});

const getProblemList = async () => {
  try {
    const { data, success } = await getkfKnowledgeBasePage(params);
    console.log(data, success);
    if (success) {
      problemList.value = data.records;
    } else {
      problemList.value = [];
    }
  } catch (error) {
    console.error(error);
    problemList.value = [];
  }
}

onMounted(() => {
  getTypeList();
});
</script>

<style scoped lang="scss">
.common-problem {
  background-color: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
  padding: 20rpx;
}

.problem-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-left {
    display: flex;
    align-items: center;
    gap: 10rpx;
    font-size: 32rpx;
    font-weight: bold;

    .chatIcon {
      font-size: 40rpx;
      color: #ffc549;
    }
  }

  .problem-count {
    background-color: #ffc549;
    color: #fff;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
  }
}

.problem-tabs {
  margin: 20rpx 0;

  .tab-scroll {
    white-space: nowrap;
  }

  .tab-list {
    display: inline-flex;
    justify-content: flex-start;
    padding: 0 20rpx;
  }

  .tab-item {
    padding: 10rpx 30rpx;
    margin-right: 20rpx;
    font-size: 28rpx;
    color: #666;
    position: relative;

    &.active {
      color: #ffc549;
      font-weight: bold;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background-color: #ffc549;
        border-radius: 2rpx;
      }
    }
  }
}

.problem-list {
  .problem-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 10rpx;

    &:last-child {
      border-bottom: none;
    }

    .problem-title {
      font-size: 28rpx;
      color: #333;
    }

    .chatIcon {
      font-size: 32rpx;
      color: #999;
    }
  }
}
</style>
